import React from 'react'
import ReactDOM from 'react-dom'
import './index.css'
// 在 JSX 中使用图片，先这样用
import avatar from './images/react.png'

const state = {
  // hot: 热度排序  time: 时间排序
  tabs: [
    {
      id: 1,
      name: '热度',
      type: 'hot',
    },
    {
      id: 2,
      name: '时间',
      type: 'time',
    },
  ],
  active: 'time',
  list: [
    {
      id: 1,
      author: '刘德华',
      comment: '给我一杯忘情水',
      time: '2021-11-10 09:09:00',
      img: 'https://y.qq.com/music/photo_new/T001R300x300M000003aQYLo2x8izP.jpg?max_age=2592000',
      // 1: 点赞 0：无态度 -1:踩
      attitude: 1,
    },
    {
      id: 2,
      author: '周杰伦',
      comment: '听妈妈的话',
      time: '2021-12-11 09:09:00',
      img: 'https://y.qq.com/music/photo_new/T001R500x500M0000025NhlN2yWrP4.jpg?max_age=2592000',
      // 1: 点赞 0：无态度 -1:踩
      attitude: 0,
    },
    {
      id: 3,
      author: '陈奕迅',
      comment: '十年',
      time: '2021-10-11 10:09:00',
      img: 'https://y.qq.com/music/photo_new/T001R500x500M000003Nz2So3XXYek.jpg?max_age=2592000',
      // 1: 点赞 0：无态度 -1:踩
      attitude: -1,
    },
  ],
}

const ele = (
  <div className='App'>
    <div className='comment-container'>
      <div className='comment-head'>
        <span>{state.list.length} 评论</span>
      </div>
      <div className='tabs-order'>
        <ul className='sort-container'>
          {/* 如果说 state.active 等于某一项的 type 的时候，才使用 on 这个类名 */}
          {state.tabs.map((item) => (
            <li
              className={state.active === item.type ? 'on' : ''}
              key={item.id}
            >
              按{item.name}排序
            </li>
          ))}
        </ul>
      </div>
      <div className='comment-send'>
        <div className='user-face'>
          <img className='user-head' src={avatar} alt='' />
        </div>
        <div className='textarea-container'>
          <textarea
            cols='80'
            rows='5'
            placeholder='发条友善的评论'
            className='ipt-txt'
          ></textarea>
          <button className='comment-submit'>发表评论</button>
        </div>
        <div className='comment-emoji'>
          <i className='face'></i>
          <span className='text'>表情</span>
        </div>
      </div>
      <div className='comment-list'>
        <div className='list-item'>
          <div className='user-face'>
            <img
              className='user-head'
              src='https://y.qq.com/music/photo_new/T001R300x300M000003aQYLo2x8izP.jpg?max_age=2592000'
              alt=''
            />
          </div>
          <div className='comment'>
            <div className='user'>刘德华</div>
            <p className='text'>给我一杯忘情水</p>
            <div className='info'>
              <span className='time'>2021-10-10 09:09:00</span>
              <span className='like liked'>
                <i className='icon'></i>
              </span>
              <span className='hate'>
                <i className='icon'></i>
              </span>
              <span className='reply btn-hover'>删除</span>
            </div>
          </div>
        </div>
        <div className='list-item'>
          <div className='user-face'>
            <img
              className='user-head'
              src='https://y.qq.com/music/photo_new/T001R500x500M0000025NhlN2yWrP4.jpg?max_age=2592000'
              alt=''
            />
          </div>
          <div className='comment'>
            <div className='user'>周杰伦</div>
            <p className='text'>听妈妈的话</p>
            <div className='info'>
              <span className='time'>2021-10-11 09:09:00</span>
              <span className='like'>
                <i className='icon'></i>
              </span>
              <span className='hate'>
                <i className='icon'></i>
              </span>
              <span className='reply btn-hover'>删除</span>
            </div>
          </div>
        </div>
        <div className='list-item'>
          <div className='user-face'>
            <img
              className='user-head'
              src='https://y.qq.com/music/photo_new/T001R500x500M000003Nz2So3XXYek.jpg?max_age=2592000'
              alt=''
            />
          </div>
          <div className='comment'>
            <div className='user'>陈奕迅</div>
            <p className='text'>十年</p>
            <div className='info'>
              <span className='time'>2021-10-11 10:09:00</span>
              <span className='like'>
                <i className='icon'></i>
              </span>
              <span className='hate hated'>
                <i className='icon'></i>
              </span>
              <span className='reply btn-hover'>删除</span>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
)

ReactDOM.render(ele, document.querySelector('#react'))